<template>
  <div ref="echart"></div>
</template>

<script>
import * as echarts from "echarts"

export default {
  props: {
    isAxisChart: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      default() {
        return {
          xData: [],
          series: [],
        }
      }
    }
  },
  watch: {
    chartData: {
      handler: function () {
        this.initChart();
      },
      deep: true
    },
  },
  methods: {
    initChart() {
      this.initChartData()//调用mock拦截后传入的数据
      if (this.echart) {
        this.echart.setOption(this.options);
      } else {
        this.echart = echarts.init(this.$refs.echart);
        this.echart.setOption(this.options);
      }
    },

    initChartData() {
      if (this.isAxisChart) {
        this.axisOption.xAxis.data = this.chartData.xData;
        this.axisOption.series = this.chartData.series;
      } else {
        this.normalOption.series = this.chartData.series;
      }
    }
  },
  data() {
    return {
      axisOption: {
        legend:{},
        tooltip:{},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: []
      },
      normalOption: {
        legend:{},
        tooltip:{},
        series: []
      },
      echart: null,
    }
  },
  computed: {
    options() {
      return this.isAxisChart ? this.axisOption : this.normalOption;
    }
  }


}

</script>